<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>模拟一个数据监测</title>
  </head>
  <body>
    <script type="text/javascript">
      let data = {
        name:'张三',
        address:'北京',
      }
      // 创建一个监视的实例对象，用于监视data中属性的变化
      const obs = new Observer(data)
      console.log(obs)
      // 准备一个vm实例对象
      let vm = {}
      vm._data = data = obs
      function Observer(obj){
        // 汇总对象中所有的属性形成一个数组
        const keys = Object.keys(obj)
        // 遍历
        keys.forEach((k)=>{
          Object.defineProperty(this,k,{
            get(){
              return obj[k]
            },
            set(val){
              console.log(`${k}被改了，我要取解析模板，生成虚拟DOM...`)
              obj[k] = val
            }
         })
      })
      }
    </script>
  </body>
  
</html>
